/// use TimeSeriesChart
import 'package:charts_flutter/flutter.dart' as charts;
import 'package:flutter/material.dart';

var data1 = [
  new LinearSales(DateTime(2019, 4, 16, 16, 00), 5),
  new LinearSales(DateTime(2019, 4, 15, 16, 00), 25),
  new LinearSales(DateTime(2019, 4, 14, 16, 00), 100),
  new LinearSales(DateTime(2019, 4, 13, 16, 00), 75),
  new LinearSales(DateTime(2019, 4, 12, 16, 00), 78),
];

var data2 = [
  new LinearSales(DateTime(2019, 4, 16, 16, 00), 25),
  new LinearSales(DateTime(2019, 4, 16, 04, 00), 55),
  new LinearSales(DateTime(2019, 4, 15, 16, 00), 99),
  new LinearSales(DateTime(2019, 4, 15, 04, 00), 75),
  new LinearSales(DateTime(2019, 4, 14, 16, 00), 75),
];

var data3 = [
  new LinearSales(DateTime(2019, 4, 16, 16, 00), 5),
  new LinearSales(DateTime(2019, 4, 16, 08, 00), 25),
  new LinearSales(DateTime(2019, 4, 16, 00, 00), 100),
  new LinearSales(DateTime(2019, 4, 15, 16, 00), 75),
  new LinearSales(DateTime(2019, 4, 15, 08, 00), 78),
];

var data4 = [
  new LinearSales(DateTime(2019, 4, 16, 16, 00), 25),
  new LinearSales(DateTime(2019, 4, 16, 10, 00), 55),
  new LinearSales(DateTime(2019, 4, 16, 04, 00), 99),
  new LinearSales(DateTime(2019, 4, 15, 22, 00), 75),
  new LinearSales(DateTime(2019, 4, 15, 16, 00), 75),
];

var data5 = [
  new LinearSales(DateTime(2019, 4, 16, 16, 00), 5),
  new LinearSales(DateTime(2019, 4, 16, 11, 12), 25),
  new LinearSales(DateTime(2019, 4, 16, 06, 24), 100),
  new LinearSales(DateTime(2019, 4, 16, 01, 46), 75),
  new LinearSales(DateTime(2019, 4, 15, 20, 48), 78),
];

var data = [
  data1,
  data2,
  data3,
  data4,
  data5,
];

void main() {
  runApp(MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.fallback(),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Chart Demo'),
        ),
        body: PointsLineChart(),
      )
  ));
}

class PointsLineChart extends StatefulWidget {
  @override
  PointsLineChartState createState() => PointsLineChartState();
}

class PointsLineChartState extends State<PointsLineChart> {

  int index = 0;
  List<LinearSales> tsdata = data[0];

  Widget chartWidget() {
    var series = [
      new charts.Series<LinearSales, DateTime>(
        id: 'Sales',
        colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
        domainFn: (LinearSales sales, _) => sales.dataTime,
        measureFn: (LinearSales sales, _) => sales.sales,
        data: tsdata,
      )
    ];

    var chart = new charts.TimeSeriesChart(series,
      animate: true,
      animationDuration: const Duration(milliseconds: 300),
      defaultRenderer: new charts.LineRendererConfig(includePoints: true),
//      domainAxis: new charts.EndPointsTimeAxisSpec(),
      domainAxis: new charts.DateTimeAxisSpec(
//        renderSpec: new charts.GridlineRendererSpec(
//
//        ),
//        tickProviderSpec: charts.StaticDateTimeTickProviderSpec(
//            tickSpecs:
//        ),
        tickFormatterSpec: new charts.AutoDateTimeTickFormatterSpec(
         year: new charts.TimeFormatterSpec(
           format: 'MM-dd\nhh:mm',
           transitionFormat: 'MM-dd\nhh:mm',
         ),
         month: new charts.TimeFormatterSpec(
           format: 'MM-dd\nhh:mm',
           transitionFormat: 'MM-dd\nhh:mm',
         ),
         day: new charts.TimeFormatterSpec(
           format: 'MM-dd\nhh:mm',
           transitionFormat: 'MM-dd\nhh:mm',
         ),
         minute: new charts.TimeFormatterSpec(
           format: 'MM-dd\nhh:mm',
           transitionFormat: 'MM-dd\nhh:mm',
         ),
        ),
        ),
        behaviors: [
        new charts.LinePointHighlighter(
            showHorizontalFollowLine:
            charts.LinePointHighlighterFollowLineType.none,
            showVerticalFollowLine:
            charts.LinePointHighlighterFollowLineType.nearest),

        ],
    );

    return Container(
      height: 350,
      padding: EdgeInsets.fromLTRB(10.0, 5.0, 10.0, 5.0),
      child: new Card(
        child: GestureDetector(
          onScaleUpdate: (ScaleUpdateDetails scaleDetails) {
            debugPrint("scale details:" + scaleDetails.toString());
          },
          child: Padding(
            padding: EdgeInsets.fromLTRB(5.0, 10.0, 5.0, 10.0),
            child: chart,
          ),
        )
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Row(
          children: [
            new Expanded(
              child: chartWidget(),
            ),
          ],
        ),
        SizedBox(
          height: 35.0,
        ),
        Text('Current level ${index + 1}',
          style: TextStyle(fontSize: 22, fontWeight: FontWeight.w700)),
        SizedBox(
          height: 35.0,
        ),
        RaisedButton(
          onPressed: () {
            setState(() {
              index = index + 1;
              if (index > 4) index = 4;
              debugPrint("current index: $index");
              tsdata = data[index];
            });
          },
          child: Text('Zoom in'),
        ),
        RaisedButton(
          onPressed: () {
            setState(() {
              index = index - 1;
              if (index < 0) index = 0;
              debugPrint("current index: $index");
              tsdata = data[index];
            });
          },
          child: Text('Zoom out'),
        ),
      ],
    );
  }
}

/// Sample linear data type.
class LinearSales {
  final DateTime dataTime;
  final int sales;

  LinearSales(this.dataTime, this.sales);
}
